/*
 * @Author: cygao
 * @Last Modified by: xieqing
 * @Last Modified time: 2018-03-14
 */

<template>
  <div id="house-info">
    <div class="step">
      <flow>
        <flow-state title="验证房源" is-done></flow-state>
        <flow-line is-done></flow-line>

        <flow-state title="房屋信息" is-done></flow-state>
        <flow-line></flow-line>

        <flow-state title="出租信息"></flow-state>
        <flow-line></flow-line>
         <flow-state title="选择合同"></flow-state>
        <flow-line></flow-line>

        <flow-state title="发布房源"></flow-state>
      </flow>
    </div>
    <div style="height:0.3rem;background:#f4f4f4"></div>
    <div class="house-info-content">
      <div class="house-item" >
        <span>区&emsp;&emsp;域 : </span>
        <selector class="select" placeholder="请选择区域" v-model="houseInfo.region" :options="regionList" @on-change="regionChange"></selector>
      </div>
      <div class="house-item" >
        <span>商&emsp;&emsp;圈 : </span>
        <selector class="select" placeholder="请选择商圈" v-model="houseInfo.pRegion" :options="pRegionList"></selector>
      </div>
      <div class="house-item" >
        <span>详细地址 : </span><input type="text" v-model="houseInfo.propertyName" placeholder="请输入详细地址">
      </div>
      <div class="house-item" >
        <span>小区名称 : </span><input type="text" v-model="houseInfo.communityName" placeholder="请输入小区名">
      </div>
      <div class="house-item" >
        <span>楼&emsp;&emsp;层 : </span><input type="text" v-model="houseInfo.floor" maxlength="3" placeholder="请输入楼层">
      </div>
      <div class="house-item" >
        <span>建筑面积 : </span><input type="text" v-model="houseInfo.area" maxlength="3" placeholder="请输入建筑面积">
      </div>
      <div class="house-item" >
        <span>房屋类型 : </span><input type="text" v-model="houseInfo.type" placeholder="请输入户型">
      </div>
      <div class="house-item" >
        <span>朝&emsp;&emsp;向 : </span>
        <selector class="select" placeholder="请选择朝向" v-model="houseInfo.direct" :options="directList"></selector>
      </div>
      <div class="house-item" >
        <span>电&emsp;&emsp;梯 : </span>
        <selector class="select" placeholder="请选择有或者否" v-model="houseInfo.isLift" :options="isLiftList"></selector>
      </div>
      <div class="house-item" >
        <span>车&emsp;&emsp;位 : </span>
        <selector class="select" placeholder="请选择有或者否" v-model="houseInfo.isCarport" :options="isCarportList"></selector>
      </div>
    </div>
    <div class="house-info-btn">
      <x-button class="btn" type="primary" @click.native="nextStep">下一步</x-button>
    </div>
  </div>
</template>
<script>
// import jsonp from 'jsonp'
import jQuery from 'jquery'
export default {
  data () {
    return {
      houseInfo: {
        region: '', // 区域
        pRegion: '', // 商圈
        propertyName: '', // 详细地址
        communityName: '', // 小区名
        floor: '', // 楼层
        area: '', // 建筑面积
        type: '', // 房屋户型
        direct: '', // 朝向
        isLift: '', // 是否有电梯
        isCarport: '' // 是否有车位
      },
      directList: [], // 朝向列表
      isLiftList: [ // 电梯列表
        {
          key: 0,
          value: '无电梯'
        },
        {
          key: 1,
          value: '有电梯'
        }
      ],
      isCarportList: [
        {
          key: 0,
          value: '无车位'
        },
        {
          key: 1,
          value: '有车位'
        }
      ],
      regionList: [], // 区域列表
      pRegionList: [] // 商圈列表
    }
  },
  computed: {
    regionName () {
      let regionList = this.regionList
      let region = this.houseInfo.region
      let obj = regionList.find((obj) => obj.key === region) || {}
      return obj.value || ''
    },
    pRegionName () {
      let pRegionList = this.pRegionList
      let pRegion = this.houseInfo.pRegion
      let obj = pRegionList.find((obj) => obj.key === pRegion) || {}
      return obj.value || ''
    }
  },
  created () {
    this.getData('CX')
    this.getData('QY')
    // 获取编辑的房源数据
    let houseId = this.$route.query.id
    if (houseId) {
      this.$axiosPosting(this.$api.getMyHouseById, {houseId}).then((res = {}) => {
        if (res.code === '0000') {
          let resData = res.data || {}
          let { propertyName, communityName, floor, area, type, direct, isLift, isCarport, houseCode, region, pRegion } = resData
          this.houseInfo = {
            propertyName,
            communityName,
            floor,
            area,
            type,
            direct,
            isLift,
            isCarport,
            houseCode,
            region,
            pRegion
          }
        }
      })
    }
  },
  methods: {
    // 获取筛选条件
    getData (codeType) {
      this.$axiosPosting(this.$api.getHouseAttributeByCodeType, { codeType }).then((res = {}) => {
        if (res.code === '0000') {
          let data = res.data || []
          this.setData(codeType, data)
        }
      })
    },
    // 拼装list
    setData (codeType, data) {
      switch (codeType) {
        case 'CX':
          data.map(item => {
            this.directList.push({'key': item.code, 'value': item.value})
          })
          break
        case 'QY':
          data.map(item => {
            this.regionList.push({'key': item.code, 'value': item.value})
          })
          break
      }
    },
    regionChange (region) {
      this.pRegion = ''
       // 获取商圈列表
      this.$axiosPosting(this.$api.getTradingAreas, {regionNo: region}).then((res) => {
        if (res.code === '0000') {
          let arr = []
          res.data.list.map(item => {
            arr.push({'key': item.no, 'value': item.name})
          })
          this.pRegionList = arr
        } else {
          this.$notify.error({
            title: '错误',
            message: res.msg
          })
        }
      })
    },
    beforeSubmit () {
      if (!this.houseInfo.region) {
        this.$vux.toast.text('请选择区域')
        return false
      }
      if (!this.houseInfo.pRegion) {
        this.$vux.toast.text('请选择商圈')
        return false
      }
      if (!this.houseInfo.propertyName) {
        this.$vux.toast.text('请输入详情地址')
        return false
      } else if (!/^[a-zA-Z0-9\u4e00-\u9fa5]+$/.test(this.houseInfo.propertyName)) {
        this.$vux.toast.text('请输入中文英文或者数字')
        return false
      }
      if (!this.houseInfo.communityName) {
        this.$vux.toast.text('请输入小区名')
        return false
      } else if (!/^[a-zA-Z0-9\u4e00-\u9fa5]+$/.test(this.houseInfo.communityName)) {
        this.$vux.toast.text('请输入中文英文或者数字')
        return false
      }
      if (!this.houseInfo.floor) {
        this.$vux.toast.text('请输入楼层')
        return false
      } else if (!/^[0-9]+$/.test(this.houseInfo.floor)) {
        this.$vux.toast.text('楼层请输入数字')
        return false
      }
      if (!this.houseInfo.area) {
        this.$vux.toast.houseInfo.text('请输入建筑面积')
        return false
      } else if (!/^[0-9]+$/.test(this.houseInfo.area)) {
        this.$vux.toast.text('面积请输入数字')
        return false
      }
      if (!this.houseInfo.type) {
        this.$vux.toast.text('请输入户型')
        return false
      } else if (!/^[a-zA-Z0-9\u4e00-\u9fa5]+$/.test(this.houseInfo.type)) {
        this.$vux.toast.text('请输入中文英文或者数字')
        return false
      }
      if (!this.houseInfo.direct) {
        this.$vux.toast.text('请选择朝向')
        return false
      }
      if (this.houseInfo.isLift !== 1 && this.houseInfo.isLift !== 0) {
        this.$vux.toast.text('请选择电梯')
        return false
      }
      if (this.houseInfo.isCarport !== 1 && this.houseInfo.isCarport !== 0) {
        this.$vux.toast.text('请选择车位')
        return false
      }
      return true
    },
    nextStep () {
      if (!this.beforeSubmit()) return // 下一步前验证输入数据
      // 获取经纬度
      let address = `广州市${this.regionName}${this.pRegionName}${this.houseInfo.propertyName}`
      let key = '2VDBZ-5YY3G-AFBQB-IQWO2-DPRUF-6KFQ4' // 目前用我个人申请的
      let url = `http://apis.map.qq.com/ws/geocoder/v1?address=${address}&key=${key}&output=jsonp`
      let that = this
      jQuery.ajax({
        url: url,
        type: 'GET',
        dataType: 'JSONP',
        JSONP: 'callback',
        success: function (res) {
          if (res.status === 0) {
            let location = res.result.location || {}
            let pubishHouseData = JSON.parse(window.localStorage.pubishHouseData || '{}')
            let localData = {
              ...pubishHouseData,
              ...that.houseInfo,
              address,
              longitude: location.lng,
              latitude: location.lat
            }
            localStorage.setItem('pubishHouseData', JSON.stringify(localData))
            that.$router.push({path: './houseSet', query: {id: that.$route.query.id}})
          }
        }
      })
    }
  }
}
</script>

<style lang="less">
  #house-info{
    font-size: 0.75rem;
    background: #fff;
    min-height: 100vh;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    .house-info-content{
      padding: 0 0.75rem;
      .house-item{
        display: flex;
        line-height: 2.4rem;
        border-bottom: 1px solid #ccc;
        span{
          width: 4rem;
        }
        input{
          flex: 1;
          border:none;
          outline:none;
          font-size: .75rem;
          padding-left:0.75rem;
        }
        .select{
          flex: 1;
          &::before{
            border: none;
          }
          .weui-select{
            // padding-left: 0;
          }
        }
      }
    }
    .house-info-btn{
      margin-top:3.6rem;
      margin-bottom: 0.5rem;
      padding: 0 0.75rem;
      .btn{
        // background: #169bd5;
        background: red;
        height: 2.5rem;
      }
      .btn-no{
        color:white;
        text-align: center;
        line-height: 2.5rem;
        font-size: 1.0rem;
        background: #ccc;
        height: 2.5rem;
        border-radius: 0.25rem;
      }
    }
    .dialog-hint{
      .weui-dialog{
        padding: 0.75rem;
        box-sizing: border-box;
        color: #343434;
        text-align: left;
        overflow: initial;
        margin-top: -1.5rem;
        .infoConfirm-hint{
          font-size: 1.1rem;
          text-align: center;
        }
        .hint-black{
          font-size: 0.8rem;
        }
        .hint-content{
          font-size: 0.6rem;
          color: #777;
          li{
            margin-top: 1.0rem;
            margin-bottom: 1.0rem;
          }
        }
        .icon-close{
          display: block;
          width: 1.75rem;
          height: 1.75rem;
          position: absolute;
          bottom: -3.15rem;
          left: 0;
          right: 0;
          margin: auto;
          background: url('../../../images/icon_close.png') center no-repeat;
          background-size: 100%;
        }
      }
    }
    input[disabled] {
      background: white;
      color: #999;
    }
    input {
      // text-align: right;
    }
  }
</style>
